<template>
    <div class="container">
        <el-button type="primary" @click="add = true">添加</el-button>
        <div class="m-table">
          <el-table
            :data="tableData"
            border
            stripe
            style="width：100%"
            :header-cell-style="{background:'#f2f2f2',color:'#696969'}">
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center">
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="actions"
              label="操作">
              <template slot-scope="scope">
               <el-button type="danger" size="mini" @click.native.prevent="del(scope.row,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- <div class="m-pager">
            <el-pagination
              @current-change="handleCurrentChange"
              @pre-click="handlePreClick"
              @next-click="handleNextClick"
              :current-page.sync="currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="totalRecord"
            ></el-pagination> -->
          <!-- </div> -->
        </div>
       <el-dialog title="添加" :visible.sync="add" :modal="false">
        <el-form :model="from" :rules="rules" ref="from" label-width="150px">
            <el-form-item label="姓名：" prop="name">
                <el-input v-model="from.name" ></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
                <el-input v-model="from.email" ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input v-model="from.password" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class>
            <el-button @click="add = false">取消</el-button>
            <el-button type="primary" @click="submitUser">确定</el-button>
        </div>
    </el-dialog>
    </div>
</template>

<script>
export default {
    name:'userlist',
    data(){
        return {
            add: false,
            // editing: false,
            tableData:[],
            from:{},
            edit:{},
            rules:{
                name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                email: [{required: true, message: "请输入邮箱", trigger: "blur" }],
                password:[{required: true, message: "请输入密码", trigger: "blur" }]
            }
        }
    },
    mounted(){
        this.userlist()
    },
    methods:{
        userlist() {
            this.$axios.get('/api/users/').then(res => {
                this.tableData = res.data
            })
        },
        submitUser(from) {
                this.$refs.from.validate(valid => {
                    if (valid) {
                        let data = {
                            name : this.from.name,
                            email : this.from.email,
                            password : this.from.password,
                        }
                        this.$axios.post('/api/users/register',data).then(res => {
                            if (res.status == 200) {
                                this.$message("保存成功！");
                                this.add = false
                                this.userlist()
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }else{
                        return false;
                    }
                })
        },
        del(index, row) {
                this.$confirm("是否要删除?", "提示", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
            this.$axios.delete('/api/users/del/'+row._id).then(res => {
                this.userlist()
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
            })
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        // toedit(index, row) {
        //     this.edit = row
        //     this.editing = true
        // },
        // submitEdit(edit) {
        //     this.$refs.edit.validate(valid => {
        //         if (valid) {
        //             let data = {
        //                 name : this.edit.name,
        //                 email : this.edit.email,
        //             }
        //             this.$axios.post('/api/users/register'+this.edit._id,data).then(res => {
        //                 if (res.status == 200) {
        //                     this.$message("保存成功！");
        //                     this.editing = false
        //                     this.userlist()
        //                 }
        //             }).catch(err => {
        //                 console.log(err)
        //             })
        //         }else{
        //             return false;
        //         }
        //     })
        // }
    }

}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.m-table{
    margin-top: 20px;
}
</style>